<template>
  <div class="login-container">
    <div class="operations"></div>
    <div class="login-bg">
      <div class="login-content">
        <div class="login-box">
          <div class="login-container-inner">
            <!-- 左侧图片 -->
            <div class="left-image">
              <img src="/liaotian.png" alt="聊天室图片" class="w-full h-full object-cover" />
            </div>

            <!-- 右侧注册表单 -->
            <div class="right-content">
              <div class="title">
                <div class="text-[30px] text-[rgba(var(--text-color),0.7)] mb-[10px]">线上聊天室</div>
                <div class="text-[28px] text-[rgb(var(--text-color))] font-[600] leading-[28px]">注册</div>
              </div>
              <div class="info">
                <chatroom-input
                  v-model:value="username"
                  class="mb-[10px]"
                  placeholder="用户名"
                  @keydown.enter="onRegister"
                />
                <chatroom-input
                  v-model:value="email"
                  class="mb-[10px]"
                  placeholder="邮箱"
                  @keydown.enter="onRegister"
                />
                <chatroom-input
                  v-model:value="password"
                  type="password"
                  placeholder="密码"
                  @keydown.enter="onRegister"
                />
              </div>
              <div @click="onRegister" :class="['login-button', { logging: logging }]">
                {{ !logging ? '注 册' : '请 等 待' }}
              </div>
              <div class="register-link mt-[15px]" @click="router.back()">已有账号？去登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useThemeStore } from '@/stores/useThemeStore.js'
import ChatroomInput from '@/components/ChatroomInput.vue'
import IconButton from '@/components/ChatroomIconButton.vue'
import { useToast } from '@/components/ToastProvider.vue'
import { useRouter } from 'vue-router'
import LoginApi from '@/api/login.js'

const themeStore = useThemeStore()
const router = useRouter()

const logging = ref(false)
const username = ref('')
const email = ref('')
const password = ref('')
const showToast = useToast()

const onRegister = () => {
  if (!username.value) {
    showToast('用户名不能为空~', true)
    return
  }
  if (!email.value) {
    showToast('邮箱不能为空~', true)
    return
  }
  if (!password.value) {
    showToast('密码不能为空~', true)
    return
  }

  logging.value = true
  LoginApi.register({
    name: username.value,
    email: email.value,
    password: password.value
  })
    .then((res) => {
      if (res.code === 0) {
        showToast('注册成功！请登录')
        router.push('/login')
      } else {
        showToast(res.msg, true)
      }
    })
    .catch((res) => {
      showToast(res.message, true)
    })
    .finally(() => {
      logging.value = false
    })
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  background: var(--screen-bg-color);

  .operations {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    @media screen and (max-height: 500px) {
      display: none;
    }
  }

  .login-bg {
    width: 100%;
    height: 100%;
    background-image: var(--scrren-grid-bg-color);
    background-size: 200px 200px;
  }

  .login-content {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 50px 50px;
    flex-direction: column;

    .web-info {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ababab;
      @media screen and (max-height: 500px) {
        display: none;
      }
    }

    .login-box {
      width: 960px;
      height: 500px;
      border-radius: 10px;
      background-image: linear-gradient(
        130deg,
        rgba(var(--background-color), 0.3),
        rgba(var(--background-color), 0.5)
      );
      backdrop-filter: blur(10px);
      border: rgba(var(--background-color), 0.5) 3px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;

      .login-container-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        border-radius: 10px;
      }

      .left-image {
        width: 50%;
        height: 100%;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px 0 0 10px;
        overflow: hidden;
      }

      .right-content {
        width: 50%;
        height: 100%;
        padding: 60px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0 10px 10px 0;
        background-color: rgba(var(--background-color), 0.2);

        .title {
          margin-bottom: 30px;
          text-align: center;
        }

        .info {
          margin-bottom: 20px;
        }

        .login-button {
          width: 100%;
          height: 50px;
          font-size: 26px;
          font-weight: 600;
          color: #ffffff;
          background-color: rgb(var(--primary-color));
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          user-select: none;

          &.logging,
          &:hover {
            background-color: rgba(76, 155, 255, 0.8);
          }
        }

        .register-link {
          margin-top: 15px;
          font-size: 14px;
          color: rgba(var(--text-color), 0.7);
          cursor: pointer;
          text-align: center;
          user-select: none;

          &:hover {
            color: rgb(var(--primary-color));
          }
        }
      }

      @media screen and (max-width: 768px) {
        flex-direction: column;
        height: auto;
        width: 95%;

        .left-image,
        .right-content {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
}
</style>
